import React from "react";

const Email = () =>{
    const navigate = React.Router.useNavigate();
    const [form] = React.Vant.Form.useForm()
    const [business,setBusiness] = React.useState(React.Cookies.load('business') || {});
    //是否被禁用
    const [iscodeDisabled,setIsCodeDisabled] = React.useState(false);
    const [isDisabled,setIsDisabled] = React.useState(false);
    //是否显示倒计时
    const [showCoutdown,setShowCoutdown] = React.useState(false);
    
    const getCode = async () =>{
        setIsCodeDisabled(true);
        //获取表单里的email值
        let Email = form.getFieldValue('email');

        let data = {
            busid:business.id,
            email:Email
        }
        
        try {
            let result = await React.Http.POST({
              url: '/business/getCode',
              params: data
            });
      
            if (result && result.code == 1) {
                setShowCoutdown(true);
                React.Vant.Notify.show({
                    type:'success',
                    message:result.msg,
                    duration:1500
                });
            } else {
                React.Vant.Notify.show({
                    type:'warning',
                    message:result.msg,
                    duration:1500
                });
            }
          }finally {
            setTimeout(() => setIsCodeDisabled(false), 1500);
            setTimeout(() => setShowCoutdown(false), 60000);
          }
    }

    const onSubmit = async (values) =>{
        setIsDisabled(true);
        let data = {
            busid:business.id,
            email:values.email,
            code:values.code
        }
        

        try{
            let result = await React.Http.POST({
                url:'/business/onemail',
                params:data
            });

            if(result && result.code===1){
                React.Vant.Notify.show({
                    type:'success',
                    message:result.msg,
                    duration:1500,
                    onClose:() => {
                        navigate('/business/index');
                    }
                });
            }else{
                React.Vant.Notify.show({
                    type:'warning',
                    message:result.msg,
                    duration:1500
                });
            }
        }finally{
            setTimeout(() => setIsDisabled(false), 1500);
        }
        
    }

    const onBack = () =>{
        navigate(-1);
    }

    const emailpp = () =>{
        React.Vant.Notify.show(business.email+'此处为只读！');
    }

    const FormFooter = () =>
    {
        return (
            <>
                <div style={{ margin: '16px 16px 0' }}>
                    <React.Vant.Button disabled={isDisabled} round nativeType='submit' type='primary' block>
                        提交
                    </React.Vant.Button>
                </div>
            </>
        )
    }

    return (
        <>
            <React.Vant.Sticky>
                <React.Vant.NavBar
                    title="邮箱认证"
                    leftText="返回"
                    onClickLeft={onBack}
                />
            </React.Vant.Sticky>

            <div className="my_kuang">
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        <div className="toux_hou">
                            <img
                                id="Dfgrg"
                                style={{height:"1.1rem"}}
                                src={business.avatar_cdn}
                                alt=""
                            />
                        </div>
                    </div>
                </div>
            </div>

            <React.Vant.Form
                form={form}
                onFinish={onSubmit}
                footer={<FormFooter />}
                labelAlign={'right'}
                colon
            >

            <React.Vant.Form.Item
                    label='邮箱'
                    name='email'
                    rules={[{ required: true, message: '未获取邮箱' }]}
                    initialValue={business.email || ''}
                >
                    <React.Vant.Input onClick={emailpp} readOnly placeholder='请输入邮箱' />
            </React.Vant.Form.Item>

            <React.Vant.Form.Item
                    label='验证码'
                    name='code'
                    rules={[{ required: true, message: '请输入验证码' }]}
                >
                    
                    <React.Vant.Input prefix={showCoutdown ? <React.Vant.CountDown time={60 * 1000} millisecond format="ss" /> : "💁"}
                        suffix={<React.Vant.Button disabled={iscodeDisabled} size="small" onClick={getCode} type="primary">发送</React.Vant.Button>}
                        placeholder="请输入邮箱验证码" />
            </React.Vant.Form.Item>
            </React.Vant.Form>
        </>
    )
}

export default Email;